<template>
	<eui-popup ref="DeliveryPopup" :type="type" :animation="false" background-color="#fff" :mask-click="false">
		<view class="popup-content">
			<view class="popup-title flex just-between">
				<view style="font-weight: bold;">
					物流信息
				</view>
				<bcm-close-btn @click="close"></bcm-close-btn>
			</view>
			<view
				style="padding-left: 30rpx;height: 50vh;color: #6C6C6C;background-color:#fff;padding-right: 36rpx;box-sizing: border-box;overflow-y: scroll;">
				<view class="flex align-center just-between"
					style="height: 100rpx;padding-right: 40rpx;box-sizing: border-box;"
					v-if="(scope.shipperName && scope.shipperPhone && orderType == 'order' && scope.pickType == '0') || orderType != 'order'">
					<view class="co-00 flex align-center just-between">
						<text class="" style="font-size: 32rpx;font-weight: bold;" v-if="scope.shipperName">
							骑手 {{ scope.shipperName }}
						</text>
						<text class="" style="font-size: 32rpx;color: #6C6C6C;" v-if="!scope.shipperName">
							暂未分配骑手
						</text>
						<text style="display: inline-block;width: 92rpx;line-height:33rpx;
							height: 33rpx;
							background: #F3F3F3;
							border-radius: 3rpx;text-align: center;font-size: 24rpx;margin-left: 7rpx;" v-if="!!scope.logisticsCode">{{
		logisticsCode }}</text>
					</view>
					<view style="width:60rpx;height: 60rpx;border-radius: 60rpx;background:#EDEDED;"
						class="flex align-center just-center" @click.stop="showContactPopup = true"
						v-if="scope.shipperPhone">
						<image src="../../../../static/img/bcmIcons/tel.png" style="height: 35rpx;width: 35rpx;">
						</image>
					</view>
				</view>
				<view style="flex: 1;border-top: 1rpx solid #F1F1F1;">
					<view v-if="deliverList.length > 0">
						<uniSteps :options="deliverList" active-color="#007AFF" direction="column"
						 />
					</view>
					<view class="flex align-center just-center" style="margin-top: 21vh;font-size:32rpx;" v-else>
						<view>暂无物流信息</view>
					</view>
				</view>
				<ShipContactPopup :show="showContactPopup" :scope="scope" @close="showContactPopup = false" />
			</view>
		</view>
	</eui-popup>
</template>
<script>
import BcmCloseBtn from '../../components/BcmCloseBtn.vue';
import uniSteps from '../../components/Steps.vue'
import ShipContactPopup from './ContactShipPopup.vue';
export default {
	name: "DeliveryPopup",
	props: {
		scope: {
			type: Object,
			default: {}
		},
		type: {
			type: String,
			default: 'bottom'
		},
		show: {
			type: Boolean,
			default: false
		},
		deliverList: {
			type: Array,
			default: []
		},
		logisticsCode: {
			type: String,
			default: ''
		},
		orderType: {
			type: String,
			default: 'order'
		},
	},
	components: {
		BcmCloseBtn,
		ShipContactPopup,
		uniSteps
	},
	watch: {
		show: {
			handler(val) {
				// console.log(val, 'val')
				if (val) {
					this.$refs.DeliveryPopup.open('bottom');
				} else {
					this.close()
				}
			},
		}
	},
	data() {
		return {
			showContactPopup: false
		}
	},
	methods: {
		close() {
			this.$refs.DeliveryPopup.close();
			this.$emit('close');
		}
	}
}
</script>
<style lang="scss" scoped>
@import '@/static/font/enjoyicon/iconfont.css';
@import '../../common/common.css';

.popup-content {
	display: flex;
	flex-direction: column;
	padding: 0;
	width: 100%;
	background-color: #fff;

	.popup-title {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		font-size: 33rpx;
		height: 100rpx;
		line-height: 100rpx;
		padding-left: 30rpx;
		padding-right: 36rpx;
		border-bottom: 1rpx solid #F1F1F1;
	}
}

.bottom-1 {
	display: flex;
	justify-content: center;
	flex: 0 0 auto;
	height: 70rpx;
	padding: $uni-spacing-col-sm * 2 $uni-spacing-row-sm;
	background: $uni-bg-color;
	// border-top: 1rpx solid #979797;
}
</style>